<!--
 * @Description: 
 * @Author: 亢超
 * @Date: 2024-11-03 23:06:43
 * @LastEditTime: 2024-11-06 09:26:11
-->
<template>
  <!-- 搜索相关 -->
  <Search ref="searchRef" :formField="formField" @search="getList" />
  <a-card class="mt-4">
    <!-- 添加相关 -->
    <a-space class="mb-4">
      <a-button type="primary">
        <template #icon> <icon-plus /> </template>
        <template #default>添加</template>
      </a-button>
      <a-button type="primary" status="danger">
        <template #icon> <icon-delete /> </template>
        <template #default>批量删除</template>
      </a-button>
    </a-space>
    <a-row :gutter="[20, 20]" v-if="(loading = false && list.length < 1)">
      <a-col
        :xxl="{ span: 3 }"
        :xl="{ span: 4 }"
        :lg="{ span: 6 }"
        :md="{ span: 8 }"
        :xs="{ span: 12 }"
        v-for="item in list"
      >
        <a-card :body-style="{ padding: 0, width: '100%' }">
          <div
            class="text-center cursor-pointer p-4 sm:hover:bg-blue-600 sm:hover:text-white"
            v-if="!loading"
          >
            <div class="w-100px h-100px rounded-1/2 overflow-hidden m-auto">
              <img
                class="w-100px h-100px"
                :src="
                  item.avatar
                    ? item.avatar
                    : 'https://img0.baidu.com/it/u=925082882,2310058501&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
                "
                alt="头像"
              />
            </div>
            <div class="right">
              <h1 class="mb-2">{{ item.role.name }}</h1>
              <h2 class="text-xl">{{ item.nickname }}</h2>
              <p class="text-xl">{{ item.phone }}</p>
            </div>
            <div class="handler">
              <a-link><span class="iconfont icon-bianjisekuai text-zinc-600"></span></a-link>
              <a-link><span class="iconfont icon-shanchu text-red-600"></span></a-link>
            </div>
          </div>
          <a-skeleton :animation="true" v-else>
            <a-space direction="vertical" class="p-4" :style="{ width: '100%' }" size="large">
              <a-skeleton-shape shape="circle" size="large" class="m-auto" />
              <a-skeleton-line :rows="3" />
            </a-space>
          </a-skeleton>
        </a-card>
      </a-col>
    </a-row>
    <NoData v-else />
    <div class="page" v-if="!loading && total > 0">
      <a-pagination
        class="mt-4 text-right"
        :total="total"
        show-total
        show-jumper
        show-page-size
        v-if="!loading"
      />
      <a-skeleton :animation="true" class="mt-4" v-else>
        <a-skeleton-line></a-skeleton-line>
      </a-skeleton>
    </div>
  </a-card>
</template>

<script setup>
import { getAllManager } from '@/api/manage.js'
import { getRoles } from '@/api/system.js'
import { reactive, ref } from 'vue'
import Search from '@/components/Search.vue'
import NoData from '@/components/NoData.vue'

const list = ref([])
const total = ref(0)
const loading = ref(false)

//搜索相关
const searchRef = ref(null)
const formField = ref([
  {
    label: '管理员昵称',
    field: 'nickname',
    type: 'input',
    placeholder: '请输入管理员昵称',
    colWidth: '100px'
  },
  {
    label: '手机号码',
    field: 'phone',
    type: 'input',
    placeholder: '请输入手机号码',
    colWidth: '100px'
  },
  {
    label: '角色名称',
    field: 'role_id',
    type: 'select',
    placeholder: '请选择角色名称',
    colWidth: '100px',
    options: []
  }
])

const getList = async (params = {}) => {
  loading.value = true
  let res = await getAllManager(params)
  if (res.code == 200) {
    list.value = res.data.list
    total.value = res.data.totalCount
    loading.value = false
  }
}
const getRoleList = async () => {
  let res = await getRoles()
  if (res.code == 200) {
    res.data.list.map((item) => {
      item.label = item.name
      item.value = item.id
    })
    formField.value.map((item) => {
      if (item.type == 'select' && item.field == 'role_id') {
        item.options = res.data.list
      }
    })
  }
}
getList()
getRoleList()
</script>

<style lang="scss" scoped></style>
